<template>
<!--  点击导航栏左侧按钮打开抽屉  -->
    <uni-drawer ref="showLeft" mode="left" :width="drawerWidth">
        <uni-card style="background: transparent;"
                  :is-shadow="false"
                  :is-full="true"
                  :border="false"
                  :title="userinfo.userNickname"
                  :sub-title="userinfo.address.equipmentType + '在线'"
                  :extra="`IP:${userinfo.address === null ? '未知' : Number(userinfo.address.province) === 0 ? '内网' : userinfo.address.province}`"
                  :thumbnail="userinfo.userHeadImg">
            <text class="uni-body">{{userinfo.userSlogan}}</text>
        </uni-card>
    </uni-drawer>

<!--
isShow	                显隐气泡弹框菜单	            false	                    是
list	                菜单数据,                    {name,                     	是
                                                    icon,
                                                    toPage,
                                                    toLink},
                                                    name属性必须
top	                    顶部位置	                    0	                        非
right	                右边位置	                    0	                        非
triangleMarginRight	    三角箭头距离右边的距离	        11	                        非
bgColor	                气泡弹框的背景色	            '#4B4B4B'	                非
textColor	            气泡弹窗的文字颜色	            '#ffffff'	                非


toPage                  跳转页面路径(可返回)            ''                          非
toLink                  navigateTo、redirectTo、     ''                          非
                        reLaunch、switchTab
-->
<!--  气泡菜单  -->
    <luanqing-popup-dialog
            :isShow="showMenuPop"
            :list="popList"
            bgColor="#FFFFFF"
            textColor="#000000"
            @click="onClickPopMenu">
    </luanqing-popup-dialog>

<!--  导航栏正下方搜索框  -->
    <view style="background-color: #F2F2F2">
        <uni-search-bar cancelButton="always" placeholder="搜索好友" bgColor="#FFFFFF" @confirm="searchFriend" radius="200"/>
    </view>

<!--  聊天列表  -->
    <uni-list :border="false">
        <uni-list-chat clickable v-for="chatFriend in chatFriendList"
                :to="`../chat/chat?friendUserId=${chatFriend.userId}`"
                avatar-circle
                :title="chatFriend.userNickname"
                :avatar="chatFriend.userHeadImg"
                :note="chatFriend.lastMessage"
                :time="chatFriend.lastMessageTime"
                :badge-text="chatFriend.unreadMessageCount"
                badge-positon="right"/>
    </uni-list>
</template>

<script>
import {toast} from "../../js/utils/showTip";
import {searchUserChatList} from "../../js/api/friend";

import UniCard from "../../uni_modules/uni-card/components/uni-card/uni-card.vue";
import UniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import UniNavBar from "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";
import UniDrawer from "../../uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniSearchBar from "../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";
import UniList from "../../uni_modules/uni-list/components/uni-list/uni-list.vue";
import UniListChat from "../../uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue";
import UniListItem from "../../uni_modules/uni-list/components/uni-list-item/uni-list-item.vue";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import LuanqingPopupDialog from "../../uni_modules/luanqing-popup-dialog/components/luanqing-popup-dialog/luanqing-popup-dialog.vue";
import WebSocketClas from "../../js/utils/webSocket";

export default {
    components: {
        LuanqingPopupDialog,
        UniIcons,
        UniListItem,
        UniListChat,
        UniList,
        UniSearchBar,
        UniDrawer,
        UniNavBar,
        UniSection,
        UniCard,
        UniPopup
    },
    data() {
        return {
            userinfo: {},
            chatFriendList: [],
            drawerWidth: '',
            showMenuPop: false,
            popList: [
                {
                    name: '添加好友',
                    icon: '../../static/index/addfriend.png',
                    toPage: ''
                },
                {
                    name: '新建群聊',
                    icon: '../../static/index/groupchat.png',
                    toPage: ''
                }
            ],
        }
    },
    methods: {
        searchFriend(res) {
            uni.showToast({
                title: '搜索：' + res.value,
                icon: 'none'
            })
        },
        searchUserChatList() {
            searchUserChatList(this.userinfo.userId).then(response => {
                if (response.code === 200) {
                    response.data.forEach(item => {
                        this.messageTotalNumber += item.unreadMessageCount
                        if (this.messageTotalNumber > 100) {
                            this.messageTotalNumber = '99+'
                        } else if (this.messageTotalNumber > 1000) {
                            this.messageTotalNumber = '999+'
                        }
                    })
                    this.chatFriendList = response.data
                }
            })
        },
        onClickPopMenu() {
            this.showMenuPop = false;
        }
    },
    onNavigationBarButtonTap(e) {
        if (e.index == 0) {
            if (this.$refs["showLeft"].status()) {
                this.$refs["showLeft"].close()
            } else {
                this.showMenuPop = false
                this.$refs["showLeft"].open()
            }
        } else {
            if (this.showMenuPop) {
                this.showMenuPop = false
            } else {
                this.showMenuPop = true
                this.$refs["showLeft"].close()
            }
        }
    },
    onLoad() {
        this.userinfo = uni.getStorageSync('user');
        this.searchUserChatList();
        uni.getSystemInfo({
            success: (res) => {
                const width = res.windowWidth
                this.drawerWidth = Math.floor(width * 0.6); // 屏幕宽度，单位为px
            }
        })

        let webSocket = new WebSocketClas(this.userinfo.userId);
        webSocket.connect()
    }
}
</script>

<style lang="scss">
@mixin flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.popup-content {
  @include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 10%;
  background-color: #FFF;
}

.uni-drawer__content {
  background: linear-gradient(#FFFFFF, #00AEEF); /*从左上角到右下角颜色过渡*/
}
</style>
